<template>
<div>

  <el-dialog
    :visible.sync="openTwo"
    width="30%"
    center>
    <el-image :src="this.srcList"></el-image>
  </el-dialog>

  <el-dialog
    :visible.sync="openOne"
    width="30%"
    center>
    <el-image :src="this.srcListTwo"></el-image>
  </el-dialog>

  <el-tabs type="border-card">
    <el-table border v-loading="loading" style="width: 100%" :data="infoList">
      <el-table-column type="selection" width="55" align="center" />
<!--      <el-table-column label="施工队Id" fixed width="100" align="center" prop="constructionId" />-->
      <el-table-column label="支付金额" width="100" align="center" prop="instalmentPice" />
      <el-table-column label="用户手机号" width="100" align="center" prop="loginName" />
      <el-table-column label="施工队名称" width="100" align="center" prop="constructionName" />
      <el-table-column label="店铺名称" width="100" align="center" prop="shopsName" />
<!--      <el-table-column label="用户Id" width="160" align="center" >-->
<!--        <template slot-scope="scope">-->
<!--          <span>{{ scope.row.customerId }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="第一次支付金额" width="100" align="center" prop="firstPayment" />
      <el-table-column label="第二次支付金额" width="100" align="center" prop="lastPayment" />
      <el-table-column label="第一次拨款" width="100" align="center" prop="oneMoney" />
      <el-table-column label="第二次拨款" width="100" align="center" prop="twoMoney" />
      <el-table-column label="第三次拨款" width="100" align="center" prop="threeMoney" />
      <el-table-column label="第四次拨款" width="100" align="center" prop="fiveMoney" />
      <el-table-column label="第五次拨款" width="100" align="center" prop="fourMoney" />

      <el-table-column label="第一期上传凭证" width="200" align="center" >
        <template slot-scope="scope">
          <div @click="aaa(scope.row)">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.firstList">
          </el-image>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="第二期上传凭证" width="200" align="center" >
        <template slot-scope="scope">
          <div @click="bbb(scope.row)">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.lastList">
          </el-image>
          </div>
        </template>
      </el-table-column>

      <el-table-column width="300">
        <template slot-scope="scope">
          <el-steps :active="scope.row.voucherStatus+1" finish-status="success">
            <el-step title="未审核"></el-step>
            <el-step title="第一期凭证"></el-step>
            <el-step title="第二期凭证"></el-step>
          </el-steps>
          <el-button style="margin-top: 12px;" @click="next(scope.row)">审核</el-button>
        </template>
      </el-table-column>

      <el-table-column label="支付状态" align="center" prop="zhuangtai" >
        <template slot-scope="scope">
          <el-tag
            disable-transitions>{{scope.row.zhuangtai =='1' ? '已支付' : '正在支付'}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="最后审核时间" width="150" align="center" prop="modifiedTime" >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.modifiedTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </el-tabs>
</div>
</template>

<script>
  import {selectPayableInstalmentEndAuditList , editVoucherStatus} from "@/api/super/checkVoucher";

  export default {
    name: "checkVoucher",
    data() {
      return {
        srcList:['',],
        srcListTwo:['',],
        valuesu: '',
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        showSearch: true,
        // 总条数
        total: 0,
        // 施工队分期支付信息列表
        infoList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        openTwo:false,
        openOne:false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          instalmentId: null,   //施工队分期支付id
          constructionId: null, //施工队ID
          customerId: null,     //用户ID
          firstList: null,      //第一期上传凭证
          lastList: null,       //第二期上传凭证
          instalmentPice: null, //价格
          zhuangtai: null,      //支付状态
          voucherStatus: null,  //凭证审核状态
          modifiedTime: null,   //最后修改时间
        },
        disabled: false,
        active: 0,
      };
    },
    created() {
      this.getList();
    },
    methods: {

      aaa(row){
        this.openTwo = true;
        this.srcList = row.firstList
      },

      bbb(row){
        this.openOne = true;
        this.srcListTwo = row.lastList
      },

      next(row){
        this.$confirm(
          "确定要审核通过嘛？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(function () {
            row.voucherStatus += 1;
            return editVoucherStatus(row.instalmentId , row.voucherStatus);
          }).then(() => {
          this.msgSuccess("审核成功！");
          this.getList();
        });
      },

      /** 查询施工队分期支付列表 */
      getList() {
        this.loading = true;
        selectPayableInstalmentEndAuditList(this.queryParams).then(res => {
          console.log(res.msg);
          this.infoList = res.rows;
          this.total = res.total;
          this.loading = false;
          console.log(this.infoList);
        });
      },
    }
  }
</script>

<style scoped>

</style>
